<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>
<script type="text/javascript" src="${ctx }/js/jquery-ui-1.8.17.custom.min.js" charset="UTF-8"></script>

<style>
<!--
  .showP{
    border-top-style:dashed; 
    border-bottom-style:dashed; 
    border-right-style:dashed; 
    border-left-style:dashed; 
    } 
-->
</style>

<script type="text/javascript">

var roomIdx="";
$(document).ready(function(){
	<c:if test="${param.returnCd=='0000' }">alert('수정했습니다');</c:if>
	
	$(document).mousemove(function(e){
		if(""!=roomIdx){
			$(".room_no_"+roomIdx).find("input[name='x_coods']").val(e.pageX);
			$(".room_no_"+roomIdx).find("input[name='y_coods']").val(e.pageY);
// 			$("#x").val(22);
		}
		$("#x").val(e.pageX);
		$("#y").val(e.pageY);
// 		$("#aa").css({"top":e.pageY,"left":e.pageX});
	});
	
	$(document).dblclick(function(e){
		if(""!=roomIdx){
			$(".room_no_"+roomIdx).find("input[name='x_coods']").val(e.pageX);
			$(".room_no_"+roomIdx).find("input[name='y_coods']").val(e.pageY);
// 			$("body").append("<div id='pointImg_"+roomIdx+"' style=\"position: absolute;top: "+e.pageY+"px;left:"+e.pageX+"px;\"><img src=\"/usr/images/point.png\" /></div>");
			showPoint();
			roomIdx="";
		}
	});
	showPoint();
	
	$( "#aa" ).draggable();
});

function setRoom(idx){
	roomIdx = idx;
}

function saveRoom(){
	if(confirm("저장하시겠습니까?")){
		$("#frmSave").submit();
	}
}

function showPoint(){
	$(".delPoint").remove();
	$(".points").each(function (){
		if($(this).find("input[name='x_coods']").val()!="0" &&
			$(this).find("input[name='y_coods']").val()!="0"){
			$("body").append("<div id='pointImg_"+$(this).find("input[name='pr_nos']").val()+"' class='delPoint' style=\"position: absolute;top: "+$(this).find("input[name='y_coods']").val()+"px;left:"+$(this).find("input[name='x_coods']").val()+"px;\"><img src=\"/usr/images/point.png\" /></div>");	
		}
	})
}

function chkPoint(type, key){
	if("Y"==type){
		$("#pointImg_"+key).addClass("showP");
	}else{
		$("#pointImg_"+key).removeClass("showP");
	}
}
</script>




<input name="" id="x" type="hidden" >
<input name="" id="y" type="hidden" >
<!-- petc0105T -->
<div style="position:absolute;top: 0px;left:0px;">
	<img src="${group.back_img}">
</div>

<div id="aa" style="position: absolute;top: 30;left:0;background-color: aqua;">
<form id="frmSave" action="./petc0108T.do">
	<input name="p_id" value="${param.p_id}" type="hidden" />
	<input name="pg_no" value="${param.pg_no}" type="hidden" />
	<table style="">
		<tr>
			<th>사이트명</th>
			<th>좌표</th>
			<th>설정</th>
		</tr>
<c:if test="${rooms !=null && fn:length(rooms)>0 }">
	<c:forEach var="map1" items="${rooms}" varStatus="status">
		<tr class="room_no_${map1.pr_no } points">
			<td>${map1.room_nm }</td>
			<td>
			
				<input name="pr_nos" value="${map1.pr_no }" type="hidden" />
				x:<input name="x_coods" value="${map1.x_cood }<c:if test="${empty map1.x_cood }">0</c:if>" type="text" size="10">
				y:<input name="y_coods" value="${map1.y_cood }<c:if test="${empty map1.y_cood }">0</c:if>" type="text" size="10">
			</td>
			<td>
				<a href="#" onclick="setRoom('${map1.pr_no }')" onmouseout="chkPoint('N','${map1.pr_no }');" onmouseover="chkPoint('Y','${map1.pr_no }');">설정</a>
			</td>
		</tr>
	</c:forEach>
</c:if>
		<tr>
			<td colspan="3" style="text-align: right;">
				<a href="#" onclick="saveRoom()">저장</a>
			</td>
		</tr>
	</table>
</form>
</div>

<form action="<c:if test="${empty group }">./petc0103T.do</c:if><c:if test="${!empty group }">./petc0105T.do</c:if>" id="frmData" name="frmData" enctype="multipart/form-data" method="post">

</form>
